<template>
  <div class="list-container">
    <!-- 搜索栏 -->
    <div class="search-bar">
      <el-input v-model="searchText" placeholder="输入关键词搜索" class="search-input">
        <template #suffix>
          <el-icon>
            <Search />
          </el-icon>
        </template>
      </el-input>
    </div>

    <!-- 列表内容 -->
    <div class="list-content">
      <div v-for="(item, index) in listData" :key="index" class="list-item">
        <div class="item-header">
          <span class="tag">
            组件名称
          </span>
          <span class="title">历史天气数据查询服务（新）常见问题解决...</span>
        </div>
        <div class="item-info">
          <span class="time">2024-01-01</span>
          <span class="author">作者：admin</span>
          <div class="operations">
            <el-button type="primary" size="small">查看</el-button>
            <el-button size="small">下载</el-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 分页 -->
    <div class="pagination">
      <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :total="total"
        :page-sizes="[10, 20, 30, 40]" layout="total, sizes, prev, pager, next" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { Search } from '@element-plus/icons-vue'

// 搜索相关
const searchText = ref('')

// 列表数据
const listData = ref([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]) // 模拟数据

// 分页相关
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(100)

const handleSizeChange = (val) => {
  console.log(`每页 ${val} 条`)
}

const handleCurrentChange = (val) => {
  console.log(`当前页: ${val}`)
}
</script>

<style lang="scss" scoped>
.list-container {
  width: 80%;

  .search-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
    margin-bottom: 20px;
    background: url(../../assets/image/searchBg.png) no-repeat;
    background-size: 100% 100%;

    .search-input {
      width: 80%;
    }
  }

  .list-content {
    .list-item {
      display: block;
      padding: 15px;
      border-bottom: 1px solid #eee;

      &:hover {
        background-color: #f5f7fa;
      }

      .item-header {
        margin-bottom: 10px;

        .tag {
          background-color: #409eff;
          color: white;
          padding: 2px 6px;
          border-radius: 4px;
          font-size: 12px;
          margin-right: 10px;
        }

        .title {
          font-size: 16px;
          color: #303133;
        }
      }

      .item-info {
        display: flex;
        align-items: center;
        color: #909399;
        font-size: 14px;

        .time,
        .author {
          margin-right: 20px;
        }

        .operations {
          margin-left: auto;

          .el-button {
            margin-left: 10px;
          }
        }
      }
    }
  }

  .pagination {
    margin-top: 20px;
    display: flex;
    justify-content: center;
  }
}
</style>